import type { DataFormSchema } from '#/components/data-form';

import { ref } from 'vue';

import { $t } from '@croco/framework/locales';

import { service } from '#/api/request';

export interface Menu extends Record<string, any> {
    /** 路由ID */
    id?: number;

    /** 路由名称 */
    name?: string;

    /** 菜单名称 */
    title?: string;

    /** 父菜单ID */
    parentId?: number;

    /** 显示顺序 */
    sequence?: number;

    /** 路由地址 */
    path?: string;

    /** 组件路径 */
    component?: string;

    /** 路由参数 */
    query?: string;

    /** 是否为外链（0否 1是） */
    isFrame?: number;

    /** 是否缓存（0不缓存 1缓存） */
    isCache?: number;

    /** 是否固定Tab页（0不固定 1固定） */
    isAffixTab?: number;

    /** 类型（W应用小程序 C菜单 F按钮） */
    type?: string;

    /** 显示状态（0隐藏 1显示） */
    visible?: number;

    /** 菜单状态 */
    status?: string;

    /** 权限字符串 */
    perms?: string;

    /** 菜单图标 */
    icon?: string;

    /** 备注 */
    remark?: string;

    /**
     * 子菜单
     */
    children?: Menu[];
}

export function useDataTemplate() {
    const buttonDataTemplate: Menu = {
        id: undefined,
        icon: '',
        type: 'F',
        title: '未命名',
        parentId: undefined,
        perms: undefined,
    };
    const menuDataTemplate: Menu = {
        id: undefined,
        icon: '',
        name: '',
        type: 'C',
        title: '未命名',
        parentId: undefined,
        perms: '',
        path: '',
        component: '',
        sequence: 0,
        isFrame: 0,
        isCache: 1,
        isAffixTab: 0,
        visible: 1,
    };

    return {
        buttonDataTemplate,
        menuDataTemplate,
    };
}

export function useForm(): DataFormSchema {
    const form = ref<Menu>({});
    const datasource = ref<Menu[]>([]);
    const columns = ref<any[]>([
        { prop: 'icon', label: '图标', width: 70, align: 'center' },
        { prop: 'title', label: '名称' },
        { prop: 'perms', label: '权限标识' },
        { prop: 'sequence', label: '序号' },
    ]);
    const rules = reactive({
        title: [{ required: true, message: $t('ui.formRules.required'), trigger: 'blur' }],
    });
    const onSubmit = (action: string, scope: any): Promise<void> | void => {
        if (action === 'insert') {
            let sequence: number = 0;
            const c = form.value?.children?.filter((item: any) => item.type === 'F');
            if (c && c.length > 0) {
                sequence = c[c.length - 1]?.sequence ?? 0;
            }
            return service.post('/system/menu', { ...scope.row, parentId: form.value.id, sequence: sequence + 5 }).then(({ data }) => {
                if (data) {
                    Object.assign(scope.row, data);
                }
                data.editing = true;
                datasource.value.push(data);
            });
        } else if (action === 'update') {
            return service.put('/system/menu', scope.row).then(({ data }) => {
                if (data) {
                    Object.assign(scope.row, data);
                }
            });
        } else {
            service.confirm({
                message: `确定对按钮[${scope.row.title}]进行删除操作?`,
                url: '/system/menu',
                data: { id: [scope.row.id] },
                success: () => {
                    datasource.value = datasource.value.filter((item: any) => item.id !== scope.row.id);
                },
            });
        }
    };
    return { form, datasource, columns, rules, onSubmit };
}
